<template>
  <view
    class="ass-comment ss-flex ss-col-top"
    :class="{'ass-comment-child':props.child}"
  >
    <image
      :class="[props.child ? 'comment-avatar-child':'comment-avatar']"
      :src="props.contnet.avatar ? cdnUrl(props.contnet.avatar) : 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/e7a91c64184dcd5646b290bf14be3b86.png'"
    />
    <view class="comment-content ss-flex-1">
      <view class="content-top  ss-flex ss-col-top">
        <view class="top-box ss-flex-1">
          <view :class="[props.child ? 'user-name-child':'user-name']">{{props.contnet.nickName}}</view>
          <view class="user-comment">
            <text v-if="props.child">回复@{{ props.contnet.to_nickName||''}}:</text>
            {{ props.contnet.content }}
          </view>
          <view class="comment-time ss-flex">
            {{ props.contnet.createtime }}
            <view @click="ontabstap">回复</view>
          </view>
        </view>
        <view class="top-like  ss-flex-col ss-col-center">
          <view
            class=" ss-flex-col ss-col-center "
            @click.stop="like"
          >
            <view
              class="comment-like-icon"
              :class="props.contnet.is_likes ? '_aicon-hear-full' : '_aicon-hear'"
              style="font-size:32rpx"
              :style="{color:theme.likes_color}"
            ></view>
            {{formatCharCount(props.contnet.likes)}}
          </view>
          <view
            class="del"
            @click.stop="del"
            v-if="userData.userInfo.id==props.contnet.user_id"
          >删除</view>
        </view>
      </view>
      <!-- 子评论 -->
      <view class="content-bottom">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import sheep from '@/sheep';
const emit = defineEmits(['comment', 'del', 'like'])
import association from '@/association/store'
import { formatCharCount, cdnUrl } from '@/association/utils'
import {
  computed,
  reactive,
  watch,
  onMounted
} from 'vue';

const theme = computed(() => association().theme)

const userData = computed(() => association())
const props = defineProps({
  tabsIndex: {
    type: [String, Number],
    default: 0
  },
  child: {
    type: Boolean,
    default: false,
  },
  keyName: {
    type: String,
    default: 'name',
  },
  BGcolor: {
    type: String,
    default: '#fff'
  },
  contnet: {
    type: Object,
    default: () => ({
      name: 'Katrina',
      avatar: '/storage/association/20231031/4e9f7233823f7e3fa2b096fc20c0b8ad.png',
      contnet: '为什么防蓝光的比近视眼睛很贵呀',
      updatatime: new Date('2023-10-29'),
      is_likes: false,
      likes: 12,
    })
  },
  color: {
    type: String,
    default: '#333'
  },
});
const state = reactive({
  tabsIndex: 0,
  isLike: false
})
// watch(
// () => props.tabsIndex,
// (newValue, oldValue) => {
//     // newValue === oldValue
//     if(newValue!= state.tabsIndex){
//         ontabstap(newValue,props.tabsList[newValue])
//     }
// },
// { deep: true }
// )
// 切换v
let timer;
let flag;
/**
 * 节流原理：在一定时间内，只能触发一次
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function throttle (func, wait = 500, immediate = true) {
  if (immediate) {
    if (!flag) {
      flag = true;
      // 如果是立即执行，则在wait毫秒内开始时执行
      typeof func === 'function' && func();
      timer = setTimeout(() => {
        flag = false;
      }, wait);
    } else {
    }
  } else if (!flag) {
    flag = true;
    // 如果是非立即执行，则在wait毫秒内的结束处执行
    timer = setTimeout(() => {
      flag = false;
      typeof func === 'function' && func();
    }, wait);
  }
}
const del = async () => {
  emit('del', props.contnet)
}
const like = async () => {
  throttle(() => {
    _like()
  }, 500)
}
const _like = async () => {
  emit('like', props.contnet)
}
const ontabstap = () => {
  emit('comment', {
    ...props.contnet,
    child: props.child
  })
}
</script>

<style lang="scss" scoped>
@import '@/association/scss/index.scss';
.ass-comment-child {
  // border-bottom: none !important;
  margin-bottom: 0 !important;
}

.ass-comment {
  // margin-bottom: 20rpx;
  // border-bottom: 1rpx solid #DCDCDC;
  .comment-avatar {
    height: 90rpx;
    width: 90rpx;
    min-width: 90rpx;
    border-radius: 50%;
    margin-right: 15rpx;
  }

  .comment-avatar-child {
    height: 62rpx;
    width: 62rpx;
    border-radius: 50%;
    min-width: 62rpx;
    margin-right: 15rpx;
  }

  .comment-content {
    .content-top {
      .top-box {
        & > view {
          margin: 0 0 15rpx;
        }

        .user-name {
          font-size: 26rpx;
		  color:#8A8A8A
        }

        .user-name-child {
          font-size: 28rpx;
		  color:#8A8A8A
        }

        .user-comment {
          font-size: 28rpx;
          color: #000000;

          & > text {
            color: #767676;
          }
        }

        .comment-time {
          color: #9d9d9d;
          font-size: 24rpx;

          & > view {
            padding: 0 20rpx;
            color: #676767;
          }
        }
      }

      .top-like {
        width: 60rpx;
        min-width: 60rpx;
        font-size: 20rpx;
        & > view {
          width: 100%;
        }

        .comment-like-icon {
          color: #1bbdce;
        }
        .del {
          padding: 15rpx 0;
          text-align: center;
          color: #767676;
        }
      }
    }

    .content-bottom {
    }
  }
}

</style>